<template>
    <div>

        <el-form  :model="addTask"  class="demo-form-inline">

            <el-form-item label="年级" :label-width="formLabelWidth">
                <el-select v-model="addTask.subjectId" placeholder="请选择" >
                  <el-option
                    v-for="item in grade"
                    :value="item.dictValue" 
                    :key="item.dictValue"             
                    :label="item.dictLabel">
                  </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input v-model="addTask.taskTitle"  ></el-input>
            </el-form-item>

            <el-form-item label="试卷" :label-width="formLabelWidth">
                <el-table :data="testData"  border>
                 <el-table-column  label="学科" width="220">
                     <template slot-scope="scope">
                      {{ scope.row.disc }}(
                         <span v-if="scope.row.grad ==0">一年级</span>
                         <span v-if="scope.row.grad ==1">二年级</span>
                         <span v-if="scope.row.grad ==2">三年级</span>
                         <span v-if="scope.row.grad ==3">四年级</span>
                         <span v-if="scope.row.grad ==4">五年级</span>
                         <span v-if="scope.row.grad ==5">六年级</span>
                         <span v-if="scope.row.grad ==6">初一</span>
                         <span v-if="scope.row.grad ==7">初二</span>
                         <span v-if="scope.row.grad ==8">初三</span>
                         <span v-if="scope.row.grad ==9">高一</span>
                         <span v-if="scope.row.grad ==10">高二</span>
                         <span v-if="scope.row.grad ==11">高三</span>
                      )
                     </template>

                 </el-table-column>
                  <el-table-column prop="testName" label="名称"></el-table-column>
                  <el-table-column prop="createTime" label="创建时间"></el-table-column>
                  <el-table-column label="操作" width="200px">
                  <template slot-scope="scope">
                  <el-button type="text" @click="dele(scope.row)" >删除</el-button> 
                 </template>
                 </el-table-column>
                </el-table>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-left: 130px;">
          <el-button type="primary" size="medium" v-if="this.id==null" @click="add()">提 交</el-button>
          <el-button type="primary" size="medium" v-else @click="upDate()">提 交</el-button>

          <el-button  @click="reset()" size="medium">重 置</el-button>

          <el-button  @click="addTest()" type="success" size="medium">添加试卷</el-button>
        </div>

        <!-- 打开试卷列表 -->

        <el-dialog title="试卷列表" :visible.sync="dialogTableVisible"  >

            <!-- 条件查询 -->
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <el-form :inline="true" :model="searchData"  class="demo-form-inline">

                      <el-form-item label="年级" :label-width="formLabelWidth">
                          <el-select v-model="searchData.grad" placeholder="请选择" clearable @change="grada">
                            <el-option
                              v-for="item in grade"
                              :value="item.dictValue" 
                              :key="item.dictValue"             
                              :label="item.dictLabel">
                            </el-option>
                          </el-select>
                      </el-form-item>


                      <el-form-item label="学科" :label-width="formLabelWidth">
                          <el-select v-model="searchData.disc" placeholder="请选择" clearable>
                            <el-option                 
                              v-for="item in findData"
                              :value="item.id" 
                              :key="item.id"             
                              :label="item.subject"
                              >
                            </el-option >
                          </el-select>              
                      </el-form-item>

                        <el-button type="primary" @click="search">查询</el-button>

                    </el-form>
                    </div></el-col>
              </el-row>

         <el-table :data="testList" height="240" border @selection-change="handleSelectionChange">
            <!-- 批量 -->
            <el-table-column type="selection" width="55"></el-table-column>

              <el-table-column prop="id" label="Id" width="100"></el-table-column>
             <el-table-column  label="学科" width="220">
                 <template slot-scope="scope">
                  {{ scope.row.disc }}(
                     <span v-if="scope.row.grad ==0">一年级</span>
                     <span v-if="scope.row.grad ==1">二年级</span>
                     <span v-if="scope.row.grad ==2">三年级</span>
                     <span v-if="scope.row.grad ==3">四年级</span>
                     <span v-if="scope.row.grad ==4">五年级</span>
                     <span v-if="scope.row.grad ==5">六年级</span>
                     <span v-if="scope.row.grad ==6">初一</span>
                     <span v-if="scope.row.grad ==7">初二</span>
                     <span v-if="scope.row.grad ==8">初三</span>
                     <span v-if="scope.row.grad ==9">高一</span>
                     <span v-if="scope.row.grad ==10">高二</span>
                     <span v-if="scope.row.grad ==11">高三</span>
                  )
                 </template>

             </el-table-column>

             <el-table-column prop="testName" label="名称" width="200"></el-table-column>
             <el-table-column prop="createTime" label="创建时间"></el-table-column>
           </el-table>
           <div slot="footer" class="dialog-footer">
             <el-button @click="dialogFormVisible=false">取 消</el-button>
             <el-button  type="primary" @click="Addtest()">确 定</el-button>

           </div>

         <!-- 分页 -->
         <div class="block">
             <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="pageNum"
             :page-sizes="[2, 4, 6, 8]"
             :page-size="pageSize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="total" style="float:right">
             </el-pagination>
         </div>


        </el-dialog>


    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            id:'',
            formLabelWidth: '120px', //新增表单宽度
            dialogTableVisible: false, //新增弹窗
            pageNum:1,
            pageSize:8,
            total:null,
            grade:[],
            addTask:{    
                "createTime": "",
                "grade": "",
                "id": 0,
                "taskTitle": "",
                subjectId:"",
                "testId": 0,
                testData:[]
            },
            testData:[],
            testList:[],
            findData:[],
           searchData:{
               disc:"",
               grad:""
           },
           subId:"",
           vall:''

        }
    },
    created(){
      this.id = sessionStorage.getItem("id");
      this.searchDict();
      if(this.id){
        this.getTask()
        // this.tree()

      }
       
    },

    methods: {

      //修改
      upDate(){
        this.addTask.testData = this.testData
        axios.put("/api/task/updateTask",this.addTask).then(res=>{
          //弹框
          this.$message({
                     message: res.data.message,
                     type: 'success'
                   });
        })
        this.$router.push("/ff")
      },
      //回显
      getTask(){
        axios.get("/api/task/getTaskById?id="+this.id).then(res=>{
          this.addTask = res.data.data
          console.log("addTask:", this.addTask);
          this.testData= res.data.data.testData
          // this.searchDict()

        
          sessionStorage.removeItem("id")
        })
      },

      //新增任务
      add(){
        this.addTask.testData = this.testData
        console.log('试卷数据',this.testData);
        
        console.log('拿到的数据',this.addTask);
        
        axios.post("/api/task/addTask",this.addTask).then(res=>{
          //弹框
          this.$message({
                     message: res.data.message,
                     type: 'success'
                   });
        })
        this.$router.push("/ff")
      },
      //删除试卷
      dele(row){
        //通过 filter 方法过滤掉需要删除的行。
        this.testData = this.testData.filter(item => item.id !== row.id);
      },
        //确定添加试卷
        Addtest(){
            this.testData.push(...this.vall)
            this.dialogTableVisible = false
        },
        //打开弹框
        addTest(){
            this.dialogTableVisible = true
            this.initTab()
            
        },
        //多选框添加试卷
        handleSelectionChange(val){
            console.log("试卷信息",val);
             console.log("试卷信息aaa", ...val);
            this.vall = val
        },
        //试卷列表
        initTab(){
            axios.post("/api/test/findTbTestPaginationList?pageNum=" + this.pageNum + "&pageSize=" +this.pageSize,this.searchData).then(res=>{
                this.testList = res.data.data.items
                this.total = res.data.data.totalElements 
            })
        },

        //分页
         handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTable();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTable()
        },


        //年级
         searchDict(){
            axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_grade_status").then(res=>{
            this.grade =res.data.data
            })
           
        },
        //判断学科
        grada(val){
          this.subId = val  
          this.Subjec()         
        },
        //学科
         Subjec(){
            axios.get("/api/subject/SubjectList?id="+this.subId).then(res=>{
                this.findData = res.data.data
            })
        },
        //重置
        reset(){
            this.getList={}
            this.testData=[]
        },
        //条询
        search(){
            this.initTab()
           
        },




    }
}
</script>

<style scoped>

</style>